<template>
  <el-dialog
    :model-value="true"
    :title="props.title"
    width="60%"
    draggable
    :before-close="cancel"
  >
    <el-row :gutter="24">
      <el-col :span="12" class="left_col">
        <ul>
          <li v-for="(item) in list" :key="item.key">
            <el-checkbox v-model="item.show" :label="item.label" size="large" />
          </li>
        </ul>
      </el-col>
      <el-col :span="12">
        <Draggable
          :list="list"
          :animation="100"
          item-key="id"
        >
          <template #item="{ element }">
            <div v-if="element.show" :key="element.key" class="move">{{ element.label }}
              <el-icon class="move_close" @click="delColum(element.key)">
                <Close />
              </el-icon>
            </div>
          </template>
        </Draggable>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { cloneDeep } from 'lodash-es'
import Draggable from 'vuedraggable'
import { Close } from '@element-plus/icons-vue'
import type { Column } from '@/components/TableEasy.vue'
const $emit = defineEmits(['submit', 'close'])
interface Props{
  title: string,
  columns: Column[]
}
const props = defineProps<Props>()
let list = reactive(cloneDeep(props.columns))
onMounted(() => {
  list = reactive(cloneDeep(props.columns))
})
const cancel = () => {
  $emit('close')
}
const submit = () => {
  $emit('submit', list)
  cancel()
}
const delColum = (key: string) => {
  list.forEach(item => {
    if (item.key === key) {
      item.show = false
    }
  })
}
</script>

<style lang="less" scoped>
.left_col{
  border-right:1px solid #ccc;
  ul{
    margin:0;
  }
}
.move{
  width: 100%;
  position: relative;
  height: 40px;
  display: flex;
  align-items:center;
  border-radius: 4px;
  &_close{
    display: none;
    position: absolute;
    right: 8px;
    top: 12px;
    cursor:pointer;
  }
  &:hover{
    .move_close{
    display: block;
   }
  }
}
</style>
